<template>
    <section class="home-container">
        <section class="home-box">
            <section class="bg">
                <img src="../../assets/images//index_bg.png" alt="" />
            </section>
            <section class="function">
                <!-- 消息列表 -->
                <section :class="['message-main', data.rollMsgList.length ? 'active' : '']">
                    <section class="message">
                        <section class="message-icon"><img src="../../assets/images/message@2x.png" alt="" /></section>
                        <section class="message-box" ref="messageRef">
                            <section class="message-ul" :style="{ transform: `translateY(${translateRoll}px)` }">
                                <section
                                    class="message-li"
                                    v-for="(item, index) in data.rollMsgList"
                                    :key="item.title"
                                    @click="data.openMessage"
                                >
                                    <section class="message-title">{{ item.title }}</section>
                                    <section class="message-date">
                                        <p>{{ item.time }}</p>
                                        <span class="iconfont icon-arrow-right"></span>
                                    </section>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
                <section class="fn-main">
                    <!-- 功能 -->
                    <section class="fn-box">
                        <section
                            class="item li"
                            v-for="(item, index) in data.list"
                            :key="item.title"
                            @click="data.onOpenPage(index, 'fn')"
                        >
                            <section class="info">
                                <section class="img"><img :src="item.img" alt="" srcset="" /></section>
                                <section class="title">
                                    <span>{{ item.title }} <i v-if="item.isNEW">NEW</i></span>
                                    <p>{{ item.describe }}</p>
                                </section>
                            </section>
                            <!-- <section class="btn">
                                {{ item.buttonTxt }}
                            </section> -->
                        </section>
                    </section>
                </section>
                <!-- 其它服务 -->
                <section class="other-service">
                    <h1>其它服务</h1>
                    <section class="service-ul">
                        <template v-for="(item, index) in data.otherService" :key="item.label">
                            <section class="service-li" @click="data.onOpenPage(index, 'service')" v-if="item.visible">
                                <section class="icon">
                                    <img :src="item.icon" alt="" />
                                </section>
                                <section class="label">
                                    <span>{{ item.label }}</span>
                                    <p v-if="item.value !== ''">{{ item.value }}</p>
                                </section>
                            </section>
                        </template>
                    </section>
                </section>
                <!-- 联系电话 -->
                <hot-line></hot-line>
            </section>
        </section>
        <!-- 确认弹窗 -->
        <confirmPopupVue
            v-model="data.confirmPopup.visible"
            :title="data.confirmPopup.title"
            :content="data.confirmPopup.content"
            :cancelBtn="false"
            @confirm="
                () => {
                    data.confirmPopup.visible = false
                }
            "
        ></confirmPopupVue>
    </section>
</template>

<script lang="ts" setup name="home">
import { reactive, ref, onMounted, watch } from 'vue'
import { WxAuth } from '@/utils/WXAuth'
import { storage } from '@/store/sessionStorage'
import { IndexData } from '.'
import MessageRoll from '@/utils/messageRoll'
import { onUnmounted } from 'vue'
import useWeixinSdk from '@/utils/WXSdk'
import confirmPopupVue from '@/components/confirmPopup/Index.vue'

//初始化数据
const data = reactive(new IndexData())
const headImgUrl = ref('')
const messageRef = ref()
const translateRoll = ref(0)

const messageRoll = new MessageRoll()
onMounted(() => {
    if (storage.get('token')) {
        //授权
        new WxAuth((img: string) => {
            headImgUrl.value = img
        })
    }
    useWeixinSdk.disableShare()
})

onUnmounted(() => {
    messageRoll.dispose()
})

watch([data.rollMsgList], (newValue, oldValue) => {
    if (newValue[0].length && messageRef.value && !messageRoll.timer) {
        //公告消息
        messageRoll.init(messageRef, data.rollMsgList.length, (index: number) => {
            translateRoll.value = -messageRef.value.offsetHeight * index
        })
    }
})
</script>

<style scoped lang="scss">
.home-container {
    height: 100vh;
    width: 100%;
    background-color: var(--cxl-color-f4f6f9);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .home-box {
        position: relative;
        //

        .bg {
            img {
                display: block;
                width: 100%;
            }
        }
    }

    .function {
        background: linear-gradient(to bottom, #ffffff, var(--cxl-color-f4f6f9) 50%);
        border-radius: var(--cxl-size-24) var(--cxl-size-24) 0 0;
        box-sizing: border-box;
        padding: var(--cxl-size-16);
        position: absolute;
        top: calc(var(--cxl-size-45) + var(--cxl-size-40) + var(--cxl-size-20));
        left: 0;
        width: 100%;
        .message-main {
            height: 0;
            overflow: hidden;
            transition: all 0.35s;
            &.active {
                height: calc(var(--cxl-size-24) + var(--cxl-size-18) + var(--cxl-size-16));
                overflow: auto;
            }
        }

        .message {
            padding: var(--cxl-size-12);
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--cxl-color-FFF5F2);
            border-radius: var(--cxl-size-6) var(--cxl-size-6) 0 0;

            .message-icon {
                width: var(--cxl-size-18);
                height: var(--cxl-size-18);
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .message-box {
                width: calc(100% - var(--cxl-size-30));
                height: var(--cxl-size-20);
                overflow: hidden;
                position: relative;
            }
            .message-ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                transition: all 0.35s;
            }
            .message-li {
                width: 100%;
                height: var(--cxl-size-20);
                display: flex;
                align-items: center;
            }
            .message-title {
                font-size: var(--cxl-size-14);
                color: var(--cxl-color-f57221);
                width: calc(100% - 10rem);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .message-date {
                font-size: var(--cxl-size-14);
                color: var(--cxl-color-f57221);
                display: flex;
                align-items: center;
                width: 10rem;
                justify-content: flex-end;
                p {
                    font-size: var(--cxl-size-14);
                    color: var(--cxl-color-f57221);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .iconfont {
                    font-size: var(--cxl-size-10);
                    margin-left: calc(var(--cxl-size-8) / 2);
                }
            }
        }
        .fn-main {
        }
        .fn-box {
            box-sizing: border-box;
        }
        .item {
            box-sizing: border-box;
            padding: 0 var(--cxl-size-14) 0 var(--cxl-size-16);
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--cxl-size-16);
            height: calc(var(--cxl-size-45) + var(--cxl-size-40));
            border-radius: var(--cxl-size-6);

            &:nth-child(1) {
                background-color: var(--cxl-color-1D7DFA);
            }
            &:nth-child(2) {
                background-color: var(--cxl-color-FD5B20);
            }
            &:nth-child(3) {
                background-color: var(--cxl-color-primary);
            }

            .info {
                display: flex;
                align-items: center;

                .img {
                    display: block;
                    width: calc(var(--cxl-size-45) + var(--cxl-size-20));
                    margin-right: var(--cxl-size-10);
                    img {
                        display: block;
                        width: 100%;
                        height: auto;
                    }
                }
                .title {
                    width: calc(100% - var(--cxl-size-45) + var(--cxl-size-20));
                    span {
                        color: var(--cxl-color-white);
                        font-size: var(--cxl-size-16);
                        margin-bottom: var(--cxl-size-6);
                        font-weight: 600;
                        display: block;
                        display: flex;
                        align-items: center;
                        i {
                            background-color: var(--cxl-color-FD5B20);
                            color: var(--cxl-color-white);
                            font-weight: 400;
                            font-size: var(--cxl-size-12);
                            padding: calc(var(--cxl-size-8) / 2) var(--cxl-size-6);
                            border-radius: 3px var(--cxl-size-10) 3px var(--cxl-size-10);
                            margin-left: var(--cxl-size-6);
                        }
                    }
                    p {
                        color: var(--cxl-color-white);
                        font-size: var(--cxl-size-13);
                    }
                }
            }
            .btn {
                width: 6rem;
                height: var(--cxl-size-30);
                background: var(--cxl-color-e9ffee);
                border-radius: var(--cxl-size-15);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: var(--cxl-size-12);
                color: var(--cxl-color-primary);
            }

            &.light {
                padding: var(--cxl-size-10) var(--cxl-size-16) var(--cxl-size-16) var(--cxl-size-16);

                .title {
                    span {
                        color: var(--cxl-color-black);
                        i {
                            font-size: var(--cxl-size-12);
                            color: var(--cxl-color-666666);
                        }
                    }
                    p {
                        color: var(--cxl-color-black);
                        i {
                            font-size: var(--cxl-size-18);
                            color: var(--cxl-color-f57221);
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

.other-service {
    background-color: var(--cxl-color-white);
    box-sizing: border-box;
    margin-top: var(--cxl-size-16);
    border-radius: var(--cxl-size-24);
    padding: var(--cxl-size-16);
    margin-bottom: var(--cxl-size-26);
    h1 {
        font-size: var(--cxl-size-14);
        font-weight: 400;
        color: var(--cxl-color-999999);
    }
    .service-ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .service-li {
            width: calc(50% - var(--cxl-size-8));
            background-color: var(--cxl-color-f9f9f9);
            display: flex;
            padding: var(--cxl-size-10) var(--cxl-size-16);
            box-sizing: border-box;
            margin-top: var(--cxl-size-16);
            border-radius: var(--cxl-size-8);
            .icon {
                width: var(--cxl-size-40);
                height: var(--cxl-size-40);
                margin-right: var(--cxl-size-10);
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .label {
                height: 100%;
                display: flex;
                align-items: center;
                font-size: var(--cxl-size-15);
                font-weight: 600;
                flex-wrap: wrap;
                span {
                    color: var(--cxl-color-333333);
                    display: block;
                    width: 100%;
                }
                p {
                    color: var(--cxl-color-primary);
                }
            }
        }
    }
}
</style>
